<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- 左边 -->
        <div class="nav-left">
            <img src="img/logo2.jpg" alt="">
            <span>我的博客系统</span>
        </div>
        <!-- 右边 -->
        <div class="nav-right">
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="api/user/logout">注销</a>
        </div>
    </div>
    <!-- 文章编辑区 -->
    <div id="edit-container">
        <!-- 输入标题，发布按钮 -->
        <div id="edit-title">
            <input type="text" id="title" placeholder="在这里写下文章标题">
            <button onclick="articleAdd()">发布文章</button>
        </div>
        <!-- 文章内容 -->
        <div id="edit-content">
            <textarea id="content" style="display: none;"></textarea>
        </div>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<!-- 开发，测开，测试面试问题：如果一个页面，点击某个提交/登录按钮，没有反应，如何确定这是一个bug？/如何定位问题？ -->
<!-- 1. 打开浏览器开发者工具，查看js控制台是否js报错无法执行发送http报文的代码 -->
<!-- 2. 抓包查看是否有真实的发送http请求 -->
<!-- 3. 如果有http请求和响应，根据报文的内容来确定是前端还是后端的问题 -->
<script src="js/util.js"></script>
<script>
    // 使用jquery框架的$(function(){}), 页面加载完以后，执行函数内的代码
    $(function(){
        var editor = editormd("edit-content", {
            //设置高宽，值和css写法一样
            width: "100%",
            // 高度是父容器edit-container全部高度减去标题50px
            height: "calc(100% - 50px)",
            // 初始化的内容（左边markdown源码）
            markdown: "# 第一篇博客文章",
            // 插件路径
            path: "editor.md/lib/",
            saveHTMLToTextarea: true,
        })
    })

    //绑定发布文章的点击事件
    function articleAdd(){
        //获取标题和内容的数据，发送http请求到后端
        let title = document.querySelector("#title").value;
        let content = document.querySelector("#content").value;
        //前端发送的请求正文格式，需要和后端解析的方式一样
        //登录时，设计的是前端发json，后端通过输入流转换为Java对象
        //这里用表单格式发送，后端解析请求数据可以不改
        ajax({
            method: "post",
            url: "api/article/add",
            contentType: "application/x-www-form-urlencoded",
            body: "title="+title+"&content="+content,
            callback: function(status, responseText){
                if(status == 200){
                    let body = JSON.parse(responseText);
                    if(body.success){
                        alert("发布文章成功")
                        //发布文章成功，跳转到博客列表页面
                        window.location.href = "blog_list.html";
                    }else{
                        alert('错误码['+json.code + '],错误信息：'+ json.message);
                    }
                }else{
                    alert("状态码："+status)
                }
            }
        });
    }
</script>
</html>